{% load i18n %}
<ul>
    <li>
        <input type="hidden" id="id_{{ widget.name }}" name="{{ widget.name }}" value="">
        <label for="{{ widget.name }}_lingvo">{% trans "Lingvo" %}</label>
        <select id="id_{{ widget.name }}_lingvo" name="{{ widget.name }}_lingvo">
            {% for lingvo in lingvoj %}
            <option value="{{ lingvo.kodo }}">{{ lingvo.nomo }}</option>
            {% endfor %}
        </select>
        <label for="id_{{ widget.name }}_chefa">{% trans "Главный вариант" %}</label>
        <input type="checkbox" id="id_{{ widget.name }}_chefa" name="{{ widget.name }}_chefa" />
    </li>
    <li>
        <input type="text" id="id_{{ widget.name }}_enhavo"{% include "django/forms/widgets/attrs.html" %}/>
    </li>
</ul>
<script>
    django.jQuery(document).ready(function () {
        let $j = django.jQuery;
        // сомнительный финт для обхода None из Python
        // не трогать!!!
        let None = null;

        let value = {% if widget.value %}{{ widget.value|safe }}{% else %}{enhavo: [], lingvo: {}, chefa_varianto: ''}{% endif %};
        let enhavo = $j('#id_{{ widget.name }}_enhavo');
        let selector = $j('#id_{{ widget.name }}_lingvo');
        let chefa =  $j('#id_{{ widget.name }}_chefa');
        let lingvo = value.chefa_varianto || 'ru_RU';

        // упаковываем результат для передачи на сервер
        $j(document).on('submit', function (e) {
            // сохраняем значение для текущего языка
            if(!value.chefa_varianto && enhavo.val()) {
                value.lingvo[lingvo] = 0;
                value.chefa_varianto = lingvo;
                value.enhavo.push(enhavo.val())
            }

            let idx = value.lingvo[lingvo];
            value.enhavo[idx] = enhavo.val();
            $j('#id_{{ widget.name }}').val(JSON.stringify(value));
        });

        // устанавливаем значения по умолчанию
        selector.find('option[value=' + lingvo + ']').attr('selected', true);
        chefa.prop('checked', true).attr('disabled', true);
        enhavo.val(value.enhavo[ value.lingvo[ value.chefa_varianto ] ]);

        // обрабатываем переключение языков
        selector.on('change', function (e) {
            if(e.target.value !== lingvo) {
                let novo_lingvo = e.target.value;

                // сохраняем значение для предыдущего языка
                let idx = value.lingvo[lingvo];
                value.enhavo[idx] = enhavo.val();
                lingvo = novo_lingvo;

                // если не было нового языка, то добавляем его
                if(!value.lingvo.hasOwnProperty(novo_lingvo)) {
                    idx = value.enhavo.length;
                    value.enhavo.push('');
                    value.lingvo[novo_lingvo] = idx;
                } else {
                    idx = value.lingvo[novo_lingvo]
                }

                // если не был задан вариант по умолчанию
                if(!value.chefa_varianto) {
                    value.chefa_varianto = novo_lingvo
                }

                // синхронизируем элементы формы
                if(value.chefa_varianto !== novo_lingvo) {
                    chefa.prop('checked', false).removeAttr('disabled')
                } else {
                    chefa.prop('checked', true).attr('disabled', true);
                }

                enhavo.val(value.enhavo[idx])
            }
        });

        // обрабатываем чекбокс "Главный вариант"
        chefa.on('change', function (e) {
            let target = $j(e.target);

            if(target.prop('checked')) {
                value.chefa_varianto = selector.val();
                chefa.prop('checked', true).attr('disabled', true);
            }
        });
    })
</script>